<template>
  <div class="box-border main-box">
    <div class="titile-box flex-center box-border">建筑饰面智能诊断系统</div>
    <div class="content-box flex-center" style="flex-direction: column; justify-content: start">
      <div class="name-box flex-center">
        <div style="height: 100%; width: 20%" class="flex-center">
          <el-icon size="2.1vmin">
            <User />
          </el-icon>
        </div>
        <el-input placeholder="请输入用户名"> </el-input>
      </div>
      <div class="name-box flex-center">
        <div style="height: 100%; width: 20%" class="flex-center">
          <el-icon size="2.1vmin">
            <Lock />
          </el-icon>
        </div>
        <el-input placeholder="请输入密码"></el-input>
      </div>
      <el-button type="primary" round style="width: clamp(300px, 20vw, 50vw); margin-top: 2vh"
        @click="login">登录</el-button>
      <div class="tip">
        <el-checkbox label="记住密码" size="large" style="width: 20%; height: 100%" />
        <div style="
            width: 80%;
            height: 100%;
            margin-right: 1vmin;
            justify-content: right;
          " class="flex-center">
          忘记密码
        </div>
      </div>
      <div class="tip hover-color">创建账号</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { API } from "~/models/api";

const login = async () => {
  // navigateTo("/user/mangement");
  await $fetch(API.BASE + API.USER_LOGIN.URL, {
    method: "POST",
    body: {
      args: {
        username: "123",
      },
    },
  });
};
</script>

<style lang="scss" scoped>
.main-box {
  @apply p-8;
}

.titile-box {
  width: 100%;
  height: 20%;
  font-size: 2rem;
  letter-spacing: 1rem;
}

.content-box {
  width: 100%;
  height: 80%;
}

.name-box {
  width: clamp(300px, 20vw, 50vw);
  height: 5vh;
  margin-top: 3vh;
}

.tip {
  width: clamp(300px, 20vw, 50vw);
  height: 5vh;
  display: flex;
  font-size: 0.9rem;
  color: gray;
  font-style: italic;

  :hover {
    color: black;
  }
}
</style>
